<template>
<div class="hello">
  <div class="bigbox">
<div class="box">
 <span  class="box-span">{{ $t('day1')}} <br/> 
<div class="boxtop">
<span >{{ $t('day2')}} </span> <br/>
</div>
<div class="boxtop" style="font-weight:600"> 
<span >{{ $t('day3')}} </span>  <br/>
</div>
<span >{{ $t('day4')}} </span>
<br/>
<br/>
<div class="boxtop" style="font-weight:600">
<span >{{ $t('day5')}} </span><br/>
</div>
<span style="margin-top:-15px">{{ $t('day6')}} </span>

<span>{{ $t('day7')}} </span>
<span>{{ $t('day8')}} </span>
<span>{{ $t('day9')}} </span><br/>
<br/>
<div class="boxtop">
<span >{{ $t('day10')}} </span><br/>
</div>

<span class="boxtop">{{ $t('day11')}} </span>
<a :href='this.lang'>{{this.lang}}</a>
<br/>
<br/>
<div class="boxtop" >
<span >{{ $t('day12')}} </span>
</div>
</span>
</div> 
</div>
</div>

</template>

<script>

/* WebViewJavascriptBridge框架使用  这段代码是固定的，必须要放到js中*/
      function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }
 
	/*与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
        setupWebViewJavascriptBridge(function(bridge) {

	   //js调用oc的方法  clickHeadImage(方法名与APP端保持一致)  大括号内是传递参数的方式
        /*  bridge.callHandler('getSubmitEnable', {"issubmit":false}, function(response) {
                
            });
 
         //oc调用Js的方法，并且有返回函数   callHeandler(方法名与app端保持一致)  data（IOS传过来的数据）
        /*   bridge.registerHandler('submitlist', function(data, responseCallback) {
                     this.submitlist()
             })*/
	/*	bridge.registerHandler('submitlist', function(data, responseCallback) {
      submitlist()
		})*/
       });
      
export default {
  name: 'index',
  data () {
    return {
     lang:''
    }
  },
  created(){
    console.log(this.$route.query.lang);
     this.$i18n.locale = this.$route.query.lang
    this.lang = this.$route.query.lang == 'zh'?'https://support.apple.com/zh-cn/HT202039':'https://support.apple.com/en-us/HT202039'
    window.goback= this.goback
  },
  methods:{
    submitlist(){
      console.log(1);
        setupWebViewJavascriptBridge(function(bridge) {
          bridge.callHandler('goback', {"uploaderimg":false}, function(response) {
                
              });
       });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  padding: 0;
  margin: 0;
}
.btn {
  position: fixed;
  bottom: 0;
  height: 214px;
  width: 746px;
  border: 2px solid #E3E9F8;
  border-radius: 40px 40px 0 0px;
  background-color: #fff;
}
.btn button {
  height: 116px;
  width: 670px;
  border-radius: 36px;
  background: linear-gradient(138.85deg, #5F87FF 14.6%, #2056FA 92.64%);
  border: none;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 500;
  font-size: 34px;
  line-height: 48px;
  text-align: center;
  color: #FFFFFF;
  margin-top: 40px;
  margin-left: 40px;
}
.hello {
  width: 100%;
  padding-bottom: 200px;
}
.bigbox {
  height: 100%;
}
.box {
  color: #2C3B5D;
  padding-top: 44px;
  width: 650px;
  height: 100%;
  overflow-x: auto;
  margin-left: 52px;
}
.box-span {
  font-size: 28px;
  line-height: 39.2px;
  font-weight: 400;
}
.boxtop {
  margin-top: 10px;
  margin-bottom: 50px;
}
.boxtop1 {
  margin-top: 10px;
  margin-bottom: 150px;
}
.header-span {
  margin-left: 114px;
  margin-top: 20px;
  width: 324px;
  height: 50px;
  font-size: 36px;
  line-height: 50.4px;
  font-weight: 600;
}
.header {
  display: flex;
  width: 750px;
  height: 88px;
}
</style>
